<template>
  <div class="forum">
    <nav-bar class="navBar"></nav-bar>
    <add-shop class="addShop"></add-shop>
    <swiper-bar class="swiperBar"></swiper-bar>
    <back-image class="backImage"></back-image>
    <product-list @getData="getTitle" :list="dataList" class="productList"></product-list> <!-- 2、父亲组件拿到从后台给的数据,通过:list="dataList"这样的方式拿到的 -->
    <!-- 4.接收发布过来的,@+信息代号名字="自定义的名字" --》 自定义的那个名字要写在方法中目的是为了拿到值   -->
    <div style="height: 1000px;"></div>
    <!-- <div class="bottomBar">
    </div> -->
  </div>
</template>

<script>
import NavBar from "@/components/Forum/NavBar"
import AddShop from "@/components/Forum/AddShop"
import SwiperBar from "@/components/Forum/SwiperBar"
import BackImage from "@/components/Forum/BackImage"
import ProductList from "@/components/Forum/ProductList"


export default {
  name: 'forum',
  components: {
    // 前面是真实組件，後面是組件的一个任意名字与import后面的那个SearchBar名字保持相同;也可以只写一个中间,号隔开
    NavBar:NavBar,
    AddShop:AddShop,
    SwiperBar:SwiperBar,
    BackImage:BackImage,
    ProductList:ProductList
  },
  data() {
    return {
      dataList:[] //1、后台给我的数据都是存放在data里面的，而且属于的是大父组件里面的;必须先声明,否则mounted里的this.dataList找不到存放位置就会直接报错
    }
  },
  mounted() {
    setTimeout(()=>{
      this.dataList = [
        {
          name:"打印机",
          backgrond:require("../../../assets/images/forumProducts/1printer.jpg"), //如果这里出不来多数都是少了require这个必须项
          imgrond:require("../../../assets/images/forumProducts/1printer.jpg"),
          fen:"1.2万粉丝"
        },
        {
          name:"卫生纸",
          backgrond:require("../../../assets/images/forumProducts/2paper.jpg"),
          imgrond:require("../../../assets/images/forumProducts/2paper.jpg"),
          fen:"2.5万粉丝"
        },
        {
          name:"电脑",
          backgrond:require("../../../assets/images/forumProducts/3computer.jpg"),
          imgrond:require("../../../assets/images/forumProducts/3computer.jpg"),
          fen:"10万粉丝"
        },
        {
          name:"桌子",
          backgrond:require("../../../assets/images/forumProducts/4desk.jpg"),
          imgrond:require("../../../assets/images/forumProducts/4desk.jpg"),
          fen:"50万粉丝"
        },
        {
          name:"沙发",
          backgrond:require("../../../assets/images/forumProducts/5sofa.jpg"),
          imgrond:require("../../../assets/images/forumProducts/5sofa.jpg"),
          fen:"3.6万粉丝"
        },
        {
          name:"华画册",
          backgrond:require("../../../assets/images/forumProducts/6photobook.jpg"),
          imgrond:require("../../../assets/images/forumProducts/6photobook.jpg"),
          fen:"4.2万粉丝"
        },
        {
          name:"电冰箱",
          backgrond:require("../../../assets/images/forumProducts/7fridge.jpg"),
          imgrond:require("../../../assets/images/forumProducts/7fridge.jpg"),
          fen:"6.6万粉丝"
        },
        {
          name:"微波炉",
          backgrond:require("../../../assets/images/forumProducts/8microoven.jpg"),
          imgrond:require("../../../assets/images/forumProducts/8microoven.jpg"),
          fen:"110万粉丝"
        },
        {
          name:"洗衣机",
          backgrond:require("../../../assets/images/forumProducts/9washer.jpg"),
          imgrond:require("../../../assets/images/forumProducts/9washer.jpg"),
          fen:"26万粉丝"
        },
        {
          name:"电视机",
          backgrond:require("../../../assets/images/forumProducts/10tv.jpg"),
          imgrond:require("../../../assets/images/forumProducts/10tv.jpg"),
          fen:"300万粉丝"
        }
      ]
    },1000)
  },
  methods: {
    getTitle(data){      //5.拿到这个函数的值输出
      console.log(data);
    }
  },
} 
</script>

<style lang="less" scoped>
  .forum{
    background-color: #EFF6F7;
  }
</style>